{% extends "global/Base.html" %}
{% load staticfiles %}
{% load otree_tags %}
{% block styles %}
    <style type="text/css">

      table#longtable {
          margin-left:auto;
          margin-right:auto;
          left: 0px;
          width: 540px;
          border-collapse: collapse;
      }

        .bleft {
          border-left: 5px solid black;
        }

        button:disabled{
            background-color: #aaa;
        }

        .center {
            margin:auto;
        }
        .form-group{display:inline-block; margin-right:-5%;}
        #element2 {display:inline-block;}
        ul{  list-style-type: none;}
        .legend { list-style: vertical; }
        .legend li { float: top; margin-left: 10px; z-index:-1;}
        .value { list-style: none; }
        .value li {  display:inline;  padding: 25px; z-index:-1; top: -87px; left: 130px;position: relative;}
        .valueN { list-style: none; }
        .valueN li {  display:inline;  padding: 25px; z-index:-1; top: 5px; left: 88px;position: relative; }

		html, body {
			height: 100%;
		}
        table tr:not(:first-child) {
        border-top: 1px solid black;
    }
    table td{
        border-left: 2px solid black;
        height: 336px;
    }

    table tr:first-child th {
        border-top: 0;
    }

    table th {
        border: 2px solid black;
    }
    table tr:last-child td {
        border-bottom: 0;
    }
    table tr td:first-child,
    table tr th:first-child {
        border-left: 0;
    }
    table tr td:last-child,
    table tr th:last-child {
        border-right: 0;
    }
    </style>

{% endblock %}


{% block title %}{% endblock %}



{% block content %}

    <!-- The area with the chart and the button. -->

    <div id = "adjusted" style="position: relative; left:-150px; " >
         <ul class="legend" id='l' style="text-align:center; position: relative; z-index: -1;  top: 10px;display: none;">
            <font size="3" > Both Assets: Average return per year = 5% <br></font>
             <font size="3" > Asset 1: Low volatility (low risk) <br></font>
            <font size="3"> Asset 2: High volatility (high risk) </font>
         </ul>
        <div id='canvas' style='position:relative;width:1044px;height:336px; margin-left: auto; margin-right:auto; margin-top: 20px; display: block;'>
            <!-- The area for the chart-->
            <ul class="value" id='v' style="position: relative; z-index: -1; left: 223px; top: 100px; visibility: hidden;">
                <font size="6"><li id="re1">  </li></font>
                <font size="6"><li id="re2">  </li></font>
            </ul>
            <div 	id='contr2'
                    style='	width: 416px; height: 320px; left: -50px;
                            position: relative;z-index: -2; margin-left: auto; margin-right:auto;
                        '
            >
    {#            <img id="des" height="330px" width="600px" src="{% static image_path %}"/>#}
            </div>

        </div>
    </div>

    <div id="portrendite" class = "bleft" style="display: none; position: relative; left: 553px; top: -379px;">

        <ul class="legend" id='l1' style=" position: relative; z-index: -1; left: 110px; top: 10px;">
            <font size="3" > Portfolio <br> (return based on your investment decision) <br></font>

         </ul>
        <div id='canvas1' style='position:relative;width:1044px;height:336px; margin-left: auto; margin-right:auto; margin-top: 20px; left: -30px;'>
            <!-- The area for the chart-->
            <ul class="value" id='v' style="position: relative; z-index: -1; left: 20px; top: 100px; ">
                <font size="6"><li id="re">  </li></font>
            </ul>
            <div 	id='contr3'
            style='	width: 316px; height: 320px; left: -310px;
                    position: relative;z-index: -2; margin-left: auto; margin-right:auto;
                '
            >
            </div>

        </div>

{#        <ul id="horiLine" style="position: absolute; z-index: -1; left: 130px; top: 182px;visibility: hidden;">#}
{#            <hr width="448" style="height:2px;border:none;color:#333;background-color:#333;">#}
{#        </ul>#}
    </div>
{#  <div class="container" style='position: relative; '>#}

    <div id = "at50" style='display: none; top: -300px; position: relative; left: 141px'>
    You have now seen 50 out of 100 return simulations. Please make your final investment decision for Asset 2.
    </div>
    <div id = "after50" style='display: none; top: -300px; position: relative; left: 141px'>
    </div>
    <p>
    {% for field in form %}
    {% formfield field %}
    {% endfor %}

    </p>
{#        </div>#}

        <div id = "bb1" style='position: relative; top: -50px; left: 50px; text-align: center; background-color: transparent;'>
            <button id="b1" style="display: none; margin: 0 auto;" class="otree-btn-next btn btn-primary">Next</button>
            <div id="b" style='display: none; margin: auto; width: 50px; ' class="otree-btn-next btn btn-primary">Simulate new returns</div>
        </div>

<div style = "height: 150px;">
<p><br>
<br>
</p>
</div>
{% endblock %}

{% block scripts %}

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <!-- for the draggable of the scrollbar -->
    <script src="//code.highcharts.com/highcharts.js"></script>
    <script src="//code.highcharts.com/highcharts-3d.js"></script>
    <script src="//code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript" src="https://blacklabel.github.io/custom_events/js/customEvents.js"></script>
    <script src="https://code.highcharts.com/modules/series-label.js"></script>

    <script>
        {% include "PRE1/Graph.js.html" %}
    </script>
    <script>

            (function ($) {
                var i;
                for (i = 0; i < document.getElementsByClassName("form-group required").length; i++) {
                    document.getElementsByClassName('form-group required')[i].style.display = "none";
                    document.getElementsByClassName('form-group required')[i].style.top = "-300px";
                    document.getElementsByClassName('form-group required')[i].style.position = "relative";
		            document.getElementsByClassName('form-group required')[i].style.left = "140px";
                }
                console.log("aaaaaaa")
                document.getElementsByTagName('h2')[0].style.fontSize = "20px";
                document.getElementsByTagName('h2')[0].style.textAlign = "center";
                document.getElementById('b').style.display = 'inline';
                document.getElementById('l').style.display = 'block';



                    document.getElementsByTagName('h2')[0].innerHTML = 'Simulation of returns: 1 von 100';
                    document.title = 'Simulation of returns: 1 von 100';
                    if ({{ format }} == 1){
                        document.getElementById('portrendite').style.display = 'block';
        		        document.getElementById('bb1').style.top = "-280px";
                    }else{
                        for (i = 0; i < document.getElementsByClassName("form-group required").length; i++) {
                            document.getElementsByClassName('form-group required')[i].style.top = "80px";
                            document.getElementsByClassName('form-group required')[i].style.left = "290px";
                        }
                        document.getElementById('bb1').style.left = "35px";

                        document.getElementById('bb1').style.top = "100px";
                        document.getElementById('adjusted').style.left = '0px';
                        document.getElementById('after50').style.top =  "80px";
                        document.getElementById('after50').style.left =  "290px";
                        document.getElementById('at50').style.top =  "80px";
                        document.getElementById('at50').style.left =  "290px";

                    }
                    funcPortfoliorendite();



                if(window.screen.width < 500){
                    document.getElementsByTagName('h2')[0].style.textAlign = "left";
                    document.getElementById('l').style.textAlign = "left";
                    document.getElementById('l').style.left = "-40px";

                    document.getElementById('longtable').style.marginLeft = "0";
                    document.getElementById('bb1').style.textAlign = "left";
                    document.getElementById('b1').style.margin = "0";
                    document.getElementById('contr2').style.margin = "0";
                    document.getElementById('contr2').style.left = "10px";
                    document.getElementById('v').style.left = "-26px";
                }





        }(jQuery));
        $( document ).ready(function() {

        });
    </script>
{% endblock %}